import {useEffect} from 'react';
import {Button, Col, DatePicker, Form, Input, Modal, Row} from 'antd';
import {formInputRules, formTextAreaRules, phoneRules} from '@/utils/rules';
import {addOrModifyEmergencyCord} from '@/services/emergency';
import {filterEmpty} from '@/utils/methods';
import {useRequest} from "ahooks";

function EmergencyResolveModal({emergencyId, onSuccess, dispatch, ...props}: any) {
  const [form] = Form.useForm();
  const {
    run: runCord,
    loading: loadingCord
  } = useRequest((values) => {
    const params: any = filterEmpty({
      originValues: values,
      keepEmpty: true,
    });
    params.time && (params.time = params.time.format('YYYY-MM-DD HH:mm:ss'));
    params.emergencyId = emergencyId;
    return addOrModifyEmergencyCord(params)
  }, {
    onSuccess(res) {
      onSuccess && onSuccess(res);
      dispatch({
        clear: true,
        open: false
      })
    }
  })
  useEffect(() => {
    props.open || form.resetFields();
  }, [props.open]);
  return (
    <Modal
      {...props}
      width={1000}
      // afterClose={form.resetFields()}
      getContainer={false}
      onCancel={() => {
        dispatch({
          clear: true,
          open: false
        })
      }}
      footer={[
        <Button key="cancel" onClick={() => {
          dispatch({
            clear: true,
            open: false
          })
        }}>
          关闭
        </Button>,
        <Button
          type="primary"
          loading={loadingCord}
          onClick={async () => {
            const value: any = await form.validateFields()
            runCord(value)
          }}
        >
          保存
        </Button>,
      ]}
    >
      <Form form={form} labelCol={{span: 9, offset: 0}}>
        <Form.Item
          name="suggestion"
          label="处理意见"
          labelCol={{span: 3}}
          rules={[
            ...formTextAreaRules,
            {
              required: true,
              message: '请输入与处理意见',
            },
          ]}
        >
          <Input.TextArea/>
        </Form.Item>
        <Row gutter={24}>
          <Col span={7}>
            <Form.Item
              name="name"
              label="处理人"
              labelCol={{span: 11, offset: 0}}
              rules={[...formInputRules]}
            >
              <Input/>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="phone" label="处理人电话" rules={[...phoneRules]}>
              <Input/>
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item name="time" label="处理时间" >
              <DatePicker format="YYYY-MM-DD"/>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}

export default EmergencyResolveModal;
